<template>
  <a-modal
    v-if="record"
    :title="`为角色“${record.role_name}”设置权限`"
    v-model="$parent.showPermissionModel"
    :footer="null"
    :width="760"
    class="setPermission"
  >
    <div class="list" :key="index" v-for="(item,index) in permissions">
      <div class="subItem" :key="subIndex" v-for="(subItem,subIndex) in item">
        <div class="leftCB">
          <!-- 选中或不选中权限，提示也不一样 -->
          <a-popconfirm
            v-if="subItem.checked == 'checked'"
            :title="`将取消角色（${record.role_name}）关于该权限${subItem.child_count>0?'及其所有子权限':''}的授权`"
            @confirm="removePermission(index,subIndex)"
            okText="确定"
            cancelText="取消"
          >
            <a-checkbox
              :indeterminate="subItem.checked == 'halfchecked'"
              :checked="subItem.checked == 'checked'"
            >{{subItem.permission_name}}</a-checkbox>
          </a-popconfirm>
          <a-popconfirm
            v-else
            :title="`该权限${subItem.child_count>0?'及其所有子权限均':''}将赋予角色：${record.role_name}`"
            @confirm="setPermission(index,subIndex)"
            okText="确定"
            cancelText="取消"
          >
            <a-checkbox
              :indeterminate="subItem.checked == 'halfchecked'"
              :checked="subItem.checked == 'checked'"
            >{{subItem.permission_name}}</a-checkbox>
          </a-popconfirm>
        </div>
        <!-- 有子元素就有展开和闭合按钮 -->
        <template v-if="subItem.child_count>0">
          <div v-if="subItem.fold" @click="unfold(index,subIndex)" class="rightBtn">
            <a-icon type="right-circle" />
          </div>
          <div v-else @click="fold(index,subIndex)" class="leftBtn">
            <a-icon type="left-circle" />
          </div>
        </template>
      </div>
    </div>
  </a-modal>
</template>
<script>
import { get } from "https";
import { truncate } from "fs";
export default {
  data() {
    return {
      record: null,
      permissions: [],
      refers: null
    };
  },
  methods: {
    async removePermission(index, subIndex) {
      let item = this.permissions[index][subIndex];
      let refers = await this.$post("/system/rolePermission/del", {
        permission_id: item.id,
        permission_parent_id_chain: item.parent_id_chain,
        role_id: this.record.id
      });
      if (refers.error) return;
      this.refers = refers.data;
      this.setChecked();
    },
    async setPermission(index, subIndex) {
      let cur = this.permissions[index][subIndex];
      let refers = await this.$post("/system/rolePermission/add", {
        permission_id: cur.id,
        permission_parent_id_chain: cur.parent_id_chain,
        role_id: this.record.id
      });
      if (refers.error) return;
      this.refers = refers.data;
      if (cur.child_count > 0) await this.unfold(index, subIndex);
      else this.setChecked();
    },
    fold(index, subIndex) {
      let item = this.permissions[index][subIndex];
      item.fold = true;
      let delCount = this.permissions.length - index - 1;
      this.permissions.splice(index + 1, delCount);
    },
    async unfold(index, subIndex) {
      let item = this.permissions[index][subIndex];
      this.permissions[index].forEach(v => (v.fold = true));
      item.fold = false;
      await this.getPermissionData(item.id, index + 1);
    },
    async getReferData() {
      if (this.refers) return;
      let refers = await this.$post("/system/rolePermission/getByRoleId", {
        role_id: this.record.id
      });
      if (refers.error) return;
      this.refers = refers.data;
    },
    async getPermissionData(parent_id = "0", index = 0) {
      let result = await this.$post("/system/permission/getByParentId", {
        parent_id
      });
      if (result.error) return;
      let delCount = this.permissions.length - index;
      this.permissions.splice(index, delCount, result.data);
      this.setChecked();
    },
    setChecked() {
      for (let pIndex in this.permissions) {
        for (let index in this.permissions[pIndex]) {
          let item = this.permissions[pIndex][index];
          if (item.fold == undefined) item.fold = true;
          let i = this.refers.findIndex(
            m =>
              item.parent_id_chain.includes(m.permission_id) &&
              m.check_stat == "checked"
          );
          if (i >= 0) {
            item.checked = "checked";
          } else {
            let refer = this.refers.find(m => m.permission_id == item.id);
            item.checked = refer ? refer.check_stat : "unchecked";
          }
          this.$set(this.permissions[pIndex], index, item);
        }
      }
    }
  }
};
</script>
<style>
.setPermission .ant-modal-body {
  padding: 12px !important;
  overflow-x: auto;
}
</style>
<style lang="scss" scoped>
.setPermission {
  .leftCB {
    flex: 1;
  }
  .leftBtn {
    width: 32px;
    text-align: center;
    cursor: pointer;
    color: #52c41a;
  }
  .rightBtn {
    width: 32px;
    text-align: center;
    cursor: pointer;
    color: #1890ff;
  }
  .list {
    width: 168px;
    height: 380px;
    border: 1px solid #ddd;
    padding: 12px;
    overflow-y: auto;
    display: inline-block;
    margin-right: 12px;
    border-radius: 3px;
  }
  .subItem {
    line-height: 32px;
    height: 32px;
    display: flex;
  }
}
</style>


